<template>
  <div class="orderForm">
      <span class="airplane">乘机人</span>
      <el-form :model="form" :rules="rules" ref="ruleForm">
        <div class="userData" v-for="(item,index) in form.users" :key="index">
            <el-form-item label="乘机人姓名" :prop="`users[${index}].username`" :rules="[{ required: true, message: '请输入乘机人姓名', trigger: 'blur' }]">
                <el-input placeholder="姓名" v-model="item.username"></el-input>
            </el-form-item>
            <el-form-item label="证件类型" :prop="`users[${index}].id`" :rules="[{ required: true, message: '请输入乘机人证件', trigger: 'blur'}]">
                <el-select placeholder="请选择活动区域" v-model="type" >
                <el-option label="身份证" value="sfz"></el-option>
                <el-option label="护照" value="huzhao"></el-option>
                </el-select>
                <el-input v-model="item.id"></el-input>
            </el-form-item>
            <span v-if="index!==0" @click="Delete(index)">✂</span>
        </div>
        <el-row style="padding: 20px 0;border-bottom: 1px dashed #bdbcbc; ">
            <el-button type="primary" @click="addUser">添加乘机人</el-button>
        </el-row>

        <div class="insurance">
            <div class="baoxian">保险</div>
            <div class="celect" v-if="order">
                <el-checkbox v-for="(item,index) in order.insurances" :key="index" 
                    :label="item.type+'￥'+item.price+'/份×1 最高赔付'+item.compensation"
                    @change='priceCompute(item.id)'
                     border>
                </el-checkbox>
            </div>
        </div>

        <div class="relation">
            <span>联系人</span>
            <div class="relation_one">
                <el-form-item label="姓名" prop="contactName">
                    <el-input autocomplete="off" placeholder="名字" v-model="form.contactName"></el-input>
                </el-form-item>
                <el-form-item label="手机" prop="contactPhone">
                    <el-input placeholder="手机号" autocomplete="off" v-model="form.contactPhone">
                        <template slot="append"><samp style="cursor: pointer" :class="{hint:countDown.whether}" @click="SendCode">{{countDown.label}}</samp></template>
                    </el-input>
                </el-form-item>
                <el-form-item label="验证码" prop="captcha">
                    <el-input placeholder="验证码" v-model="form.captcha"></el-input>
                </el-form-item>
            </div>
        </div>
        <el-row class="btn">
            <el-button type="warning" style="width: 220px; margin: 0 auto" @click="submit">提交信息</el-button>
        </el-row>
      </el-form>
  </div>
</template>

<script>
export default {
    props: ['order'],
    data(){
        return {
            type: 'sfz',
            countDown: {
                label: '发送验证码',
                itme: 5,
                whether: false,
                itmeId: -1,
            }, 
            form:{
                users:[{username:'大爷',id:'360'}],
                insurances: [],  // 保险id
                contactName: '小爷',  // 联系人名字
                contactPhone: '123', // 联系人电话
                invoice: false, //是否需要发票
                seat_xid: this.$route.query.seat_xid, //座位id
                air: this.$route.query.id,  //航班id
                captcha: '000000', // 手机验证码
            },
            rules: {
                contactName: [{ required: true, message: '请输入怜惜人姓名', trigger: 'blur'}],
                contactPhone: [{ required: true, message: '请输入联系电话', trigger: 'blur'}],
                captcha: [{ required: true, message: '请输入验证码', trigger: 'blur'}],
            }
        }
    },
    watch:{
        "form.insurances": function () {
            this.count()
        },
        "form.users": function () {
            this.count()
        }
    },
    mounted(){
        this.count()  //页加载完传递数据给父组件，解决页第一次进入总价问题
    },
    methods: {
        // 将乘机人数和保险封装函数传递给父组件
        count(){
            let data = {userPeople:this.form.users.length,insurances:this.form.insurances}
            //console.log(data);
            this.$emit('calculateTheTotalPrice',data)
        },
        // 添加乘机人
        addUser(){
            this.form.users.push({username:'',id:''})
        },
        // 删除乘机人
        Delete(index){
            this.form.users.splice(index,1)
        },
        //发送验证码
        SendCode(){
            if(this.countDown.whether){
                return
            }else {
                this.$refs.ruleForm.validateField('contactPhone', async (valid)=>{
                    if(valid == ''){
                        let res = await this.$axios.post('/captchas',{tel:this.form.contactPhone})
                        console.log(res);
                        this.countDown.whether = true
                        this.countDown.itmeId = setInterval(()=>{
                            this.countDown.label = `${this.countDown.itme}S后再次发送验证码`
                            this.countDown.itme--
                            if(this.countDown.itme < -1){
                                clearInterval(this.countDown.itmeId)
                                this.countDown.label = '发送验证码'
                                this.countDown.itme = 5
                                this.countDown.whether = false
                            }
                        },1000)
                    }
                })
            }
        },
        // 保险点击
        priceCompute(id){
            let res = this.form.insurances.findIndex(v=>v==id)
            if(res === -1){
                this.form.insurances.push(id)
            }else {
                this.form.insurances.splice(res,1)
            }
        },
        //点击提交票信息
        submit(){
            this.$refs.ruleForm.validate( async (valid)=>{
                console.log(valid);
                if(valid){
                    let {token} = this.$store.state.user.userInfo
                    if(!token){
                        this.$message.error('请先登录')
                        this.$store.commit("page/backSet",this.$route.fullPath)

                        console.log(this.$store.state.page.siteUrl);

                        this.$router.push('/user/login')
                    }else {
                        // 登录后
                        console.log(this.form);
                        this.$axios.post('/airorders',this.form,{
                            headers: {
                                Authorization: 'Bearer ' + this.$store.state.user.userInfo.token
                            },
                        }).then(res=>{
                            console.log(res);
                            this.$message(res.data.message)
                            setTimeout(()=>{

                                this.$router.push('/air/pay?id='+ res.data.data.id)
                            },1000)
                        })

                        //console.log(this.$store.state.user.userInfo.token);
                    }
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
.hint {
    color: red;
}

.orderForm {
    .airplane {
        font-size: 24px;
        padding: 10px 0 10px;
    }
    .el-form-item {
        display: flex;
        flex-direction: column;
    }
    /deep/ .el-form-item__label{
        text-align: left;
    }
    /deep/.el-form-item__content {
        display: flex;
    }
    .userData {
        padding-bottom: 6px;
        border-bottom: 1px dashed #bdbcbc;
        position: relative;
        span{
            position: absolute;
            top: 50%;
            bottom: 50%;
            right: 0;
            cursor: pointer;
        }
    }
    .insurance {
        padding-bottom: 20px;
        .baoxian {
            line-height: 42px;
            font-size: 24px;
        }
        .celect {
            display: flex;
            flex-direction: column;
            width: 300px;
        }
        /deep/ .el-checkbox.is-bordered+.el-checkbox.is-bordered {
            margin: 10px 0 0 0;
        }
        /deep/ .el-checkbox+.el-checkbox {
            margin: 0;
        }
    }
    .relation {
        width: 50%;
        padding-top: 10px;
        border-top: 1px dashed #bdbcbc;
        span{
            font-size: 24px;
        }
    }
    .btn {
        width: 100%;
        display: flex;
        align-items: center;
        margin-bottom: 20px;
    }
}
</style>